<template>
  <div class="db1">
    <div class="order-header">
      <span class="margin-right-20">{{ item.creationTime }}</span>
      <span class="order-id">Future : {{ item.orderNumber }}</span>
    </div>
    <sn-row-has-four-col class="margin-top" :one="4" :two="10" :three="6" :four="4">
      <!-- 海报-->
      <el-image
          class="movie-img"
          :src="item.movieImage" slot="one-col"/>
      <!-- 基本信息-->
      <div slot="two-col">
        <div class="base">{{ item.movieName }}</div>
        <div class="base">{{ item.cinemaName }}</div>
        <div class="base">{{ item.hallName }}</div>
        <div class="base">{{ item.seatInfo }}</div>
      </div>
      <!-- 总价 和订单状态-->
      <div slot="three-col">
        <span class="price">
          {{ item.truePrice }}
        </span>
        <span class="status">
          {{ getOrderStatus }}
        </span>
      </div>
      <!-- 操作-->
      <div slot="four-col" class="caozuo">
        <el-link
            :underline="false"
            @click="toOrderDetails()"
            class="margin-right-20">查看詳情
        </el-link>
        <el-link
            :underline="false"
            type="danger"
            @click="toOrderPay()"
            v-if="item.payStatus === 2">订单付款
        </el-link>
      </div>
    </sn-row-has-four-col>
  </div>
</template>
<script>
export default {
  name: "MeOrderTemplate",
  computed: {
    getOrderStatus() {
      let status = ''
      switch (this.item.payStatus) {
        case 1:
          status = '已付款'
          break
        case 2:
          status = '待付款'
          break
        case 3:
          status = '已过期'
          break
      }
      return status
    }
  },
  data() {
    return {
      // item: {
      //   //座位id
      //   seatId: '',
      //   //下单时间:''
      //   creationTime: '2019-10-04',
      //   //订单编号:''
      //   orderNumber: '21425328981',
      //   //电影名称
      //   movieName: '中国机长',
      //   //电影图片
      //   movieImage: 'https://p0.meituan.net/movie/cddf92d0ac6a0db837a1bc488b241c42267927.jpg@66w_91h_1e_1c',
      //   //影院名称
      //   cinemaName: '影立方773IMAX影城（东郊记忆店）',
      //   //影院地址
      //   cinemaAddress: '',
      //   //影院电话
      //   cinemaPhone: '',
      //   //座位信息
      //   seatInfo: '6排08座 6排05座 6排06座 6排07座',
      //   //放映时间
      //   showTime: '10月4日 21:45',
      //   //电影价格
      //   truePrice: '196',
      //   //支付状态【1.已完成，2.待付款 3已过期】
      //   payChannel: 2,
      //   //用户名称
      //   userName: '',
      //   //影厅名称
      //   hallName: '1号厅'
      // }
    }
  },
  props: {
    item: Object
  },
  methods: {
    //订单详情
    toOrderDetails() {
      this.$router.push({name: "orderDetails"})
    },
    //订单付款
    toOrderPay() {
      this.$http({
        url: `/web/order/aliPayOrder/${this.item.orderNumber}`,
        method: 'get',
      }).then(({data}) => {
        let div = document.createElement('div')
        div.innerHTML = data
        document.body.appendChild(div)
        //执行submit表单提交，让页面重定向，跳转到支付宝页面F
        document.forms[0].submit()
      })
    }
  },
}
</script>
<style scoped lang="less">
.db1 {
  height: 200px;
  border: 1px solid #E9E9EB;
  margin-bottom: 20px;
}

.order-header {
  background-color: #f7f7f7;
  font-size: 14px;
  padding: 16px 20px;
}


.order-id {
  color: #999;
}


.movie-img {
  width: 100px;
  height: 120px;
  margin-left: 20px;
}

.base {
  margin-bottom: 15px;
}

.price {
  position: relative;
  top: 60px;
  font-size: 18px;
  color: orange;
  font-weight: bold;
  margin-right: 30px;
}

.status {
  position: relative;
  top: 59.5px;
  font-size: 16px;
  color: orange;
  margin-right: 30px;
}

.caozuo {
  margin-top: 60px;
}
</style>
